@charset "UTF-8";
/* D'Brands (webFront) - CSS - © 2017 4toestudio.com */

/*==== webFonts ====*/
@import url('https://fonts.googleapis.com/css?family=Asap:400,500,700');

/*==== Basic stuff ====*/
body {
	font-family: 'Asap', sans-serif;
	font-size: 16px;
	font-weight: 400;
	background: #000;
	color: #000;
	margin: 0; padding: 0;
}

div { margin: 0; padding: 0; overflow: hidden;}
img { max-width: 100%; height: auto; border: none; vertical-align: top;}

a {
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;}
	
a:link, a:visited { color: #fdbf16; text-decoration: none;}
a:hover, a:active { color: #999;}


/*===== the Wrapper =====*/
.theWrapper { width: 80%; max-width: 960px; margin: 0 auto; overflow: hidden;}

/*===== the Small Wrapper =====*/
.theSmallWrapper { width: 70%; max-width: 700px; margin: 0 auto; overflow: hidden;}

/*===== the Big Wrapper =====*/
.theBigWrapper { width: 80%; max-width: 1180px; margin: 0 auto; overflow: hidden;}

/*===== justWrapp =====*/
.justWrapp { width: 100%; overflow: hidden;}


/*===== colX2 =====*/
.colX2 { width: 45%; margin: 0 5% 0 0; float: left;}


/*===== yellowBTN =====*/
.yellowBTN a {
    font-size: 16px;
    color: #000;
    display: block;
    padding: 10px 2%;
    background: #fdbf16;
    border-radius: 5px;
    text-decoration: none;
    line-height: 1em;
    text-align: center;
    width: 100%;
    max-width: 250px;
    margin: 40px 0 0 0;
}

.yellowBTN a:link, .yellowBTN a:visited { color: #000;}
.yellowBTN a:hover, .yellowBTN a:active { color: #fff; background: #444 !important;}



/*===== Headings =====*/
h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1em;}
h1 { font-size: 32px; color: #fdbf16;}

h2 { 
	font-size: 30px;
	padding: 0 0 15px 0;
 	background: url(images/titleStroke.png) no-repeat bottom left;}

h3 { font-size: 28px;}
h4 { font-size: 18px;}


/*===== Header =====*/
#header { width: 100%; height: 100px; padding: 40px 0; background: #fff;}

/*===== (top) L =====*/
#top-L { width: 25%; float: left;}

/*===== Logo =====*/
#logo { width: 30%; margin: 0 10%; padding: 0; text-align: center; float: left;}
#logo img { display: block; margin: 0 auto;}

/*===== (top) R =====*/
#top-R { width: 25%; padding: 55px 0 0 0; float: right; text-align: right;}
#top-R img { padding: 0 0 0 20px;}


/*===== Nav =====*/
#nav {
	width: 100%;
	max-width: 640px;
	height: 50px;
	margin: 0 auto;
	background: #fdbf16;
	color: #000;
	font-size: 18px;
	font-weight: 500;
	text-transform: uppercase;
	text-align: center;
	position: fixed;
	top: 180px;
	left: 0; right: 0;
	z-index: 700;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#nav.stayUp { top: 0;}

#nav ul { list-style-type: none; margin: 0; padding: 15px 0;}
#nav li { display: inline-block; margin: 0 5px;}
#nav li a { padding: 0 20px; border-right: solid thin #000;}
#nav li:last-child a { border: none;}

#nav li a:link, #nav li a:visited { color: #000;}
#nav li a:hover, #nav li a:active { background: #000; color: #fdbf16;}



/*===== introBox =====*/
#introBox {
	width: 100%;
	padding: 120px 0;
	background: #7d7978 url(images/introBck.jpg) no-repeat center center fixed;
	background-size: cover;
	color: #fff;
}

/*===== the Intro =====*/
#theIntro { 
	max-width: 600px;
	margin: 0 auto;
	font-size: 24px;
	text-align: center;}


/*===== Servicios =====*/
#servicios { width: 100%; padding: 80px 0 80px 0; background: #000; color: #fff;}
#servicios h4 { font-size: 24px; color: #fdbf16;}

/*===== theServices =====*/
#theServices {}
#theServices ul { margin: 20px 0; padding: 0 0 0 20px;}

/*===== theForm =====*/
#theForm { width: 40%; margin: 40px 0 0 0; padding: 2%; border: solid thin #fff;}




/*===== BrandBox =====*/
#brandBox { width: 100%; padding: 20px 0; background: #fff; text-align: center;}
#brandBox img { padding: 0 10px;}


/*===== showBox =====*/
#showBox { width: 100%; background: #fff; overflow: hidden;}
#showBox img { width: 33.33%; float: left;}


/*===== Quienes Somos =====*/
#quienes-somos { width: 100%; padding: 80px 0; background: #fff;}
#quienes-somos h4 { font-size: 24px;}

/*===== theVision =====*/
.theMision { padding: 15px 0; border-bottom: solid thin #999;}



/*===== Puntos de Venta =====*/
#puntos-de-venta { width: 100%; padding: 40px 0; background: #fff5dc; text-align: center}
#puntos-de-venta .theWrapper {}
#puntos-de-venta h2 { background-position: bottom center;}
#puntos-de-venta img { padding: 4px 15px;}



/*===== Footer =====*/
#footer { width: 100%; padding: 70px 0; background: #000; color: #fff;}
#footer a:link, #footer a:visited { color: #fff;}
#footer a:hover, #footer a:active { color: #fdbf16;}

/*===== (footer) Logo =====*/
#footer-Logo { width: 25%; margin: 0 5% 0 0; float: left;}

/*===== (footer) Contact =====*/
#footer-Contact { width: 70%; float: right; text-align: right;}
#footer-Contact a { padding: 0 0 0 30px;}



/*===============================================================
  Forms (stuff)
=================================================================*/
.ninja-forms-required-items { display: none;}

/*===== Contact =====*/
#ninja_forms_form_1 { max-width: 600px; margin: 0 auto;}
#ninja_forms_form_1 input, #ninja_forms_form_1 textarea, #ninja_forms_form_1 select { width: 99%; padding: 2%; border: solid 1px #ccc; background: #fff; -webkit-appearance: none;}

/*===== Subscribe =====*/
#ninja_forms_form_5 { max-width: 600px; margin: 0 auto;}
#ninja_forms_form_5 input, #ninja_forms_form_5 textarea, #ninja_forms_form_5 select { width: 99%; padding: 2%; border: solid 1px #ccc; background: #fff; -webkit-appearance: none;}

/*===== Form BTN =====*/
.formBTN-wrap { margin: 20px 0 10px 0 !important;}

input.formBTN { 
	background: #fdbf16 !important;
	color: #000;
	border: none !important;
	padding: 4% 10%;
	font-size: 110%;
	cursor: pointer;
	-webkit-appearance: none;
   	-moz-appearance:    none;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;}

input.formBTN:hover { background: #4d4d4d !important; color: #fff;}



/*=====================
the "Tweaks"
=====================*/

video {
  width: 100%    !important;
  height: auto   !important;
  vertical-align: top;
}

/*==== showBox (L) vid (R) ====*/
#show-L, #showVid, #show-R { width: 33.33%; float: left;}
#showVid video { margin-top: -1.5%;}



/*===== (RS) Custom stuff =====*/
.royalSlider,
.royalSlider .rsOverflow,
.royalSlider .rsSlide,
.royalSlider .rsVideoFrameHolder,
.royalSlider .rsThumbs {
    background: transparent !important;
}

.rsContent img { margin: 0 !important; width: 100% !important;}




/*==================================
	Distribución (landing stuff)
===================================*/

/*===== landingLayout =====*/
.colX50 { width: 50%; float: left;}
.content50 { width: 80%; max-width: 400px; margin: 0 auto; text-align: center; font-size: 14px;}


/*===== Cerraduras =====*/
#cerraduras { 
	width: 100%;
	background: #234B9D;
	background-image: linear-gradient(#234B9D, #262865);
	color: #fff;}

#cerrad-Facts { padding: 100px 0 40px 0;}

/*===== silverBox =====*/
#silverBox { width: 100%; background: #F1F1F2; padding: 20px 0; color: #000;}
#silverBox .content50 { margin: 0 auto !important;}
#silverBox img { padding: 0 5px;}



/*===== Candados =====*/
#candados { width: 100%; padding: 70px 0; background: #fff;}
#candados-Pics { width: 55%; margin: 0 5% 0 0; float: left;}

#candados-Facts { 
	width: 29%;
	padding: 0 5%;
	font-size: 14px;
	border-left: solid thin #ccc;
	text-align: center;}


/*===== Calentadores =====*/
#calentadores { width: 100%; background: #040D55; color: #fff;}
#calent-Facts { padding: 100px 0;}
#calent-Facts img { padding: 0 5px;}


/*===== Llaves =====*/
#llaves { width: 100%; background: #fff;}
#llaves-Facts { padding: 100px 0;}
#llaves-Facts img { padding: 0 5px;}